<template>
  <div class="attention-wrap">
    <ul class="attention-ul">
      <li v-for="item in attention">
        <div class="attentionImg">
          <img :src="item.img" alt="">
        </div>
        <p class="position">{{item.position}}</p>
        <p class="advisory">{{item.advisory}}</p>
        <p class="fanNumDiary">
          <span>{{item.fanNum}}粉丝</span>
          <span>{{item.diary}}日记</span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
        name: "attention",
      data() {
        return {
          attention: [
            {
              img: "./../assets/img/flow1.png",
              position: '婚礼策划师',
              advisory: "梦幻巴黎婚礼",
              fanNum: 2,
              diary: 2,
            },
            {
              img: "../../assets/img/flow1.png",
              position: '婚礼策划师',
              advisory: "梦幻巴黎婚礼",
              fanNum: 2,
              diary: 2,
            },
            {
              img: "./assets/img/flow1.png",
              position: '婚礼策划师',
              advisory: "梦幻巴黎婚礼",
              fanNum: 2,
              diary: 2,
            }
          ]
        }
      }
    }
</script>

<style scoped>
  .attention-wrap {
    box-sizing: border-box;
    padding: .1rem;
  }
  .attention-ul {
    display: flex;
  }
  .attention-ul>li{
    flex: 1;
    width: 31%;
    box-sizing: border-box;
    border:1px solid #f1f1f1;
    padding: .2rem;
    background: #fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
  }
  .attention-ul>li:nth-child(2n){
    margin:0 2%;
  }
  .attentionImg {
    width: 1.5rem;
    height: 1.5rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin: 0 auto;
  }
  .attentionImg>img{
    width: 100%;
    height: 100%;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }
  .advisory,.position {
    margin-top: .2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    text-align: center;
  }
  .advisory{
    color: #989898;
  }
  .fanNumDiary {
    color: #989898;
    margin-top: .2rem;
    display: flex;
    justify-content: space-around;
    font-size: 13px;
  }

  /*底部导航*/
  .tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: .1rem;
    background: #fff;
    border-top: 1px solid #f1f1f1;

  }
  .tabberList {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }
  .tabbaricon{
    width: .5rem;
    height: .5rem;
    margin-bottom:.1rem ;
  }
  .tabbaricon>img{
    width: 100%;
    height: 100%;
    display: block;
  }
  .tabbarActive{
    color: #e55583;
  }
</style>
